<template>
    <div class="container">
        <div class="welcome">
            <img class="welcome-avatar" :src="$store.state.avatar" />
            <span class="welcome-text">
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link fs-24 bold">
                        你好，{{ $store.state.companyName }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <template v-for="(item, i ) in companyList" :key="i">
                                <el-dropdown-item
                                    @click="onChangeCompany(item.companyId)">{{ item.companyName
                                    }}</el-dropdown-item>
                            </template>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

            </span>
        </div>
        <div class="flex mg-b-24 gap-20 mg-t-16">
            <div class="block w-45">
                <div class="block-header">
                    <div class="block-title">账户余额</div>
                    <div v-if="isOpenPaySalary" class="block-more point">
                        <div class="flex flex-ai-c" @click="onDetail">
                            <div class="">查看详情</div>
                            <div class="triangle"></div>
                        </div>
                    </div>
                </div>
                <div class="block-content ">
                    <div class="row">
                        <div class="flex-1 p-r-24 border-r">
                            <div class="key flex-ai-c flex gap-10"><img class="wh-16" src="../assets/home/wechat.png"
                                    alt="">
                                余额（元）</div>
                            <div v-if="isOpenPaySalary" class="flex flex-btetween flex-ai-c">
                                <div class="balance">￥<span class="number">{{ accountProductStatus.pay.balance }}</span>
                                </div>
                                <el-button type="primary" plain size="mini" @click="onWechatRecharge">充值</el-button>
                            </div>
                        </div>
                        <div class="flex-1 p-l-40">
                            <div class="key flex-ai-c flex gap-10"><img class="wh-16" src="../assets/home/alipay.png"
                                    alt="">
                                余额（元）</div>
                            <div v-if="isOpenPaySalary" class="flex flex-btetween flex-ai-c">
                                <div class="balance">￥<span class="number">{{ accountProductStatus.alipay.balance
                                        }}</span></div>
                                <el-button type="primary" plain size="mini" @click="isShow = true">充值</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block flex-1">
                <div class="block-header">
                    <div class="block-title">账户余额</div>
                    <div class="block-more point">
                        <div class="flex flex-ai-c">
                        </div>
                    </div>
                </div>
                <div class="block-content ">
                    <div class="row">
                        <div class="flex-1 border-r">
                            <div class="key">长期保余额></div>
                            <div class="balance">
                                ￥<span class="number">{{ accountProductStatus.periodInsur.balance }}</span>
                            </div>
                        </div>
                        <div class="flex-1 p-l-40 border-r">
                            <div class="key">日日保余额></div>
                            <div class="balance">
                                ￥<span class="number">{{ accountProductStatus.wesure.balance }}</span>
                            </div>
                        </div>
                        <div class="flex-1 p-l-40 border-r">
                            <div class="key">电子合同份数</div>
                            <div class="balance">
                                <span class="number">{{ accountProductStatus.eleSign.balance }}</span>
                            </div>
                        </div>
                        <div class="flex-1 p-l-40">
                            <div class="key">团意日保余额></div>
                            <div class="balance">
                                ￥<span class="number">{{ accountProductStatus.tyxSign.balance }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="basic block" v-if="false">
                <div class="welcome">
                    <img class="welcome-avatar" :src="$store.state.avatar" />
                    <span class="welcome-text">
                        你好，{{ $store.state.companyName }}
                    </span>
                </div>
                <div class="basic-data-list">
                    <div class="basic-data">
                        <div>
                            <div class="basic-data-title">发薪账户余额</div>
                            <div class="basic-data-num data-num">
                                {{ balances.payBalance }}
                            </div>
                        </div>
                    </div>
                    <div class="basic-data">
                        <div>
                            <div class="basic-data-title">可发金额</div>
                            <div class="basic-data-num data-num">
                                {{ balances.canUseBalance }}
                            </div>
                        </div>
                    </div>
                    <div class="basic-data">
                        <div>
                            <div class="basic-data-title">保险账户余额</div>
                            <div class="basic-data-num data-num">
                                {{ balances.wesureBalance }}
                            </div>
                        </div>
                    </div>
                    <div class="basic-data">
                        <div>
                            <div class="basic-data-title">合同账户余额</div>
                            <div class="basic-data-num data-num">
                                {{ balances.eleSignOverAmount }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="commonly">
            <div class="trend block blur">
                <div class="lock-box" v-if="!isOpenPaySalary">
                    <img src="../assets/home/lock.png" class="lock-icon" alt="" />
                    <p>您还没有开通该功能权限<br />如有需要请联系销售</p>
                </div>

                <div :class="{ lock: true, lockBlur: !isOpenPaySalary }">
                    <trend />
                    <!-- <div class="block-header">
                        <div>
                            <div class="block-title">发薪趋势</div>
                            <div>
                                <el-date-picker v-model="payMonth" type="month" @change="onPayMonth" class="date-month"
                                    value-format="YYYY-MM" />
                            </div>
                        </div>
                        <div class="basic-data-list">
                            <div class="basic-data">
                                <div>
                                    <div class="basic-data-title">发薪项目</div>
                                    <div class="basic-data-num data-num">
                                        {{ trendBasic.payOrderCount }}
                                    </div>
                                </div>
                            </div>
                            <div class="basic-data">
                                <div>
                                    <div class="basic-data-title">领薪金额</div>
                                    <div class="basic-data-num data-num">
                                        ￥{{ trendBasic.payReceiveTotalMoney }}
                                    </div>
                                </div>
                            </div>
                            <div class="basic-data">
                                <div>
                                    <div class="basic-data-title">待领金额</div>
                                    <div class="basic-data-num data-num">
                                        ￥{{ trendBasic.payAvailableTotalMoney }}
                                    </div>
                                </div>
                            </div>
                            <div class="basic-data row-list">
                                <div>
                                    <div class="basic-data-title">实际发薪金额</div>
                                    <div class="basic-data-num data-num">
                                        ￥{{ trendBasic.payTotalMoney }}
                                    </div>
                                </div>
                                <div>
                                    <div class="basic-data-title">停止发薪金额</div>
                                    <div class="basic-data-num data-num">
                                        ￥{{ trendBasic.payStopTotalMoney }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block-content">
                        <div id="trend"></div>
                    </div> -->
                </div>
            </div>
            <div class="right">
                <div class="nav block">
                    <div class="block-header">
                        <div class="block-title">快速开始 / 便捷导航</div>
                    </div>
                    <div class="block-content">
                        <div class="fast-menu point" @click="
                            $router.push({
                                path: '/pay'
                            })
                            ">
                            <img class="fast-menu-icon" src="@/assets/home/fast-pay.png" />
                            <div>发薪查询</div>
                        </div>
                        <div class="fast-menu point" @click="
                            $router.push({
                                path: '/payroll'
                            })
                            ">
                            <img class="fast-menu-icon" src="@/assets/home/rayroll.png" />
                            <div>工资单查询</div>
                        </div>
                        <div class="fast-menu point" @click="
                            $router.push({
                                path: '/book'
                            })
                            ">
                            <img class="fast-menu-icon" src="@/assets/home/staff.png" />
                            <div>我的员工库</div>
                        </div>
                        <div class="fast-menu point" @click="
                            $router.push({
                                path: '/sign'
                            })
                            ">
                            <img class="fast-menu-icon" src="@/assets/home/sign-in.png" />
                            <div>查考勤</div>
                        </div>
                    </div>
                </div>
                <div class="not-paid block">
                    <div class="block-header">
                        <div class="block-title">未领薪人员</div>

                        <!-- <div class="go-detail point" @click="$router.push({ path: '/pay', query: { type: 'will' } })">
                            <span>查看详情</span>
                            <div class="triangle triangle-arrow"></div>
                        </div> -->
                    </div>
                    <div class="set-pd flex gap-16">
                        <div class="flex-no-shrink box flex-1 pointer"
                            @click="$router.push({ path: '/pay', query: { type: 'pay', statusName: '未领取', auditStatus: 1 } })">
                            <div class="basic-data-title ">
                                <div class=" flex flex-jc-sb flex-ai-c">
                                    <span class="fs-16">发薪未领取</span>
                                    <el-icon style="vertical-align: middle; color: #1989fa">
                                        <CaretRight />
                                    </el-icon>
                                </div>
                            </div>
                            <div class="basic-data-num data-num">
                                {{ unclaimedCount }} <span class="fs-14">人</span>
                            </div>
                        </div>
                        <div class="flex-no-shrink box flex-1 pointer"
                            @click="$router.push({ path: '/advance/applay', query: { type: 'not', status: 0, auditStatus: 1 } })">
                            <div class="basic-data-title ">
                                <div class=" flex flex-jc-sb flex-ai-c">
                                    <span class="fs-16">预支未领取</span>
                                    <el-icon style="vertical-align: middle; color: #1989fa">
                                        <CaretRight />
                                    </el-icon>
                                </div>
                            </div>
                            <div class="basic-data-num data-num">
                                {{ advanceUnclaimedCount }} <span class="fs-14">人</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="workers block">
                    <div class="block-header">
                        <div class="block-title">简历库</div>
                        <div class="go-detail point" @click="$router.push({ path: '/book' })">
                            <!-- <span>查看详情</span> -->
                            <!-- <div class="triangle triangle-arrow"></div> -->
                            <el-icon style="vertical-align: middle; color: #1989fa">
                                <CaretRight />
                            </el-icon>
                        </div>
                    </div>
                    <div class="block-content">
                        <div>
                            <div class="basic-data-title">人数</div>
                            <div class="basic-data-num data-num">
                                {{ addressPeopleCount }}
                            </div>
                        </div>
                        <img class="commonly-right-img" src="@/assets/chart/chart-line-green.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="risk-insure-box">
            <div class="insurance block blur risk-box">
                <div class="lock-box" v-if="!isOpenWesure">
                    <img src="../assets/home/lock.png" class="lock-icon" alt="" />
                    <p>您还没有开通该功能权限<br />如有需要请联系销售</p>
                </div>
                <div :class="{ lock: true, lockBlur: !isOpenWesure }">
                    <div class="block-header row">
                        <div class="block-title">风险分析</div>
                        <!-- <div class="insure-type-box">
                            <el-select v-model="insureType" class="insure-type-select" placeholder="Select" size="small">
                                <el-option
                                    key="0"
                                    label="日日保"
                                    value="0"/>
                                <el-option
                                    key="0"
                                    label="团意日保"
                                    value="1"/>
                            </el-select>
                        </div> -->
                    </div>
                    <div class="row">
                        <div id="risk" style="height:350px;width: 100%;"></div>
                    </div>
                    <div class="row risk-info">
                        <div>
                            <div class="title">案件数</div>
                            <div class="num">{{ riskInfo.caseAmount }}</div>
                        </div>
                        <div class="risk-adorn"></div>
                        <div>
                            <div class="title">赔付金额</div>
                            <div class="num"><text class="unit">¥</text>{{ riskInfo.finalMoney }}</div>
                        </div>
                        <div class="risk-adorn"></div>
                        <div>
                            <div class="title">赔付率</div>
                            <div class="num">{{ Number(((riskInfo.finalMoney / riskInfo.totalPrice) * 100).toFixed(2))
                                }}<text class="unit">%</text></div>
                        </div>
                        <div class="risk-adorn"></div>
                        <div>
                            <div class="title">实时费率</div>
                            <div class="num num-active">+{{ riskInfo.insurRate * 100 }}<text class="unit">%</text></div>
                        </div>
                    </div>
                    <div class="insure-remind-box align-start">
                        <div class="title">
                            建议
                        </div>
                        <div>
                            <div>
                                <text>
                                    · 1-3类工种出险占比19.23%，需加强关注此职业类别用工单位
                                </text>
                            </div>
                            <div>
                                <text>
                                    · 理赔率远高于平台平均水平，预计在下个调价周期进行价格上调
                                </text>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="insurance block blur insure-box">
                <div class="lock-box" v-if="!isOpenWesure">
                    <img src="../assets/home/lock.png" class="lock-icon" alt="" />
                    <p>您还没有开通该功能权限<br />如有需要请联系销售</p>
                </div>
                <div :class="{ lock: true, lockBlur: !isOpenWesure }">
                    <div class="block-header">
                        <div class="btn-insure-box">
                            <div :class="['btn-insure', 'point', recordNum === 'insure_type_rrb' ? 'btn-insure-active' : '']"
                                @click="onRecordNum('insure_type_rrb')">日日保</div>
                            <div :class="['btn-insure', 'point', recordNum === 'insure_type_tyrb' ? 'btn-insure-active' : '']"
                                @click="onRecordNum('insure_type_tyrb')">团意保</div>
                        </div>
                        <div class="go-detail point">
                            <!-- <span>查看详情</span>
                            <div class="triangle triangle-arrow"></div> -->
                        </div>
                    </div>
                    <div class="block-content">
                        <div class="row">
                            <div class="data-labels">
                                <div class="data-label blue">在保人数</div>
                            </div>
                            <tabCapsule :list="['今日', '近7天', '近30天']" :active="insuranceTab"
                                @tabchange="onInsuranceTab" />
                        </div>
                        <div class="row">
                            <div id="insurance"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="insurance block blur">
            <div class="lock-box" v-if="!isOpenWesure">
                <img src="../assets/home/lock.png" class="lock-icon" alt="" />
                <p>您还没有开通该功能权限<br />如有需要请联系销售</p>
            </div>

            <div :class="{ lock: true, lockBlur: !isOpenWesure }">
                <div class="block-header">
                    <div class="block-title">工伤保险</div>
                    <div class="go-detail point">
                    </div>
                </div>
                <div class="block-content">
                    <div class="row">
                        <div class="data-labels">
                            <div class="data-label blue">投保人数</div>
                        </div>
                        <tabCapsule
                            :list="['今日', '近7天', '近30天']"
                            :active="insuranceTab"
                            @tabchange="onInsuranceTab"
                        />
                    </div>
                    <div class="row">
                        <div id="insurance"></div>
                    </div>
                </div>
            </div>
        </div> -->
        <!-- <div class="contract block blur" >
            <div class="lock-box" v-if="!isOpenEleSign">
                <img src="../assets/home/lock.png" class="lock-icon" alt="" />
                <p>您还没有开通该功能权限<br />如有需要请联系销售</p>
            </div>

            <div :class="{ lock: true, lockBlur: !isOpenEleSign }">
                <div class="block-header">
                    <div class="block-title">电子合同</div>
                    <div
                        class="go-detail point"
                        @click="$router.push({ path: '/contract/record' })"
                    >
                        <span>查看详情</span>
                        <div class="triangle triangle-arrow"></div>
                    </div>
                </div>
                <div class="block-content">
                    <div class="row">
                        <div class="data-labels">
                            <div class="data-label blue">共签署</div>
                            <div class="data-label green">待签署</div>
                        </div>
                        <tabCapsule
                            :list="['今日', '近7天', '近30天']"
                            :active="contractTab"
                            @tabchange="onContractTab"
                        />
                    </div>
                    <div class="row">
                        <div id="contract"></div>
                    </div>
                </div>
            </div>
        </div> -->
        <!-- <seatNotice v-model:show="showSeatNotice" /> -->
        <alipayRechargeDialog v-model:show="isShow" :num="accountProductStatus.alipay.balance"></alipayRechargeDialog>
        <wechatRechargeDialog v-model:show="isShowwechat"></wechatRechargeDialog>
        <midAutumn v-model:show="showFestival" />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import tabCapsule from '@/components/tab-capsule.vue'
import {
    getBalance,
    getPayTrend,
    getPeopleCount,
    getInsuranceTrend,
    getContractTrend,
    getInsuranceRisk
} from '@/api/home'
import * as echarts from 'echarts'
import { dateFormat } from '@/utils/util'
import store from '@/store'
import user from '@/utils/user'
import trend from './home/components/trend.vue'
import alipayRechargeDialog from '@/components/alipay-recharge-dialog/alipay-recharge-dialog.vue'
import wechatRechargeDialog from '@/components/wechat-recharge-dialog/wechat-recharge-dialog.vue'
import { AccountProductStatusDto, CompanyItemDto, getAccountProductStatusApi, replaceCompany, getCompanyListApi, queryRechargeAndSync } from '@/api/alipay-recharge'
import midAutumn from '@/components/dialog/mid-autumn.vue'
import global from '@/utils/global'

const now = new Date().getTime()
const end = new Date('2025-02-04 23:59:59').getTime()
const start = new Date('2025-01-20 00:00:00').getTime()

export default defineComponent({
    name: 'Home',
    components: {
        tabCapsule,
        alipayRechargeDialog,
        wechatRechargeDialog,
        // seatNotice,
        trend,
        midAutumn
    },
    data() {
        return {
            companyList: [] as CompanyItemDto[],
            accountProductStatus: {} as AccountProductStatusDto,
            isShow: false,
            isShowwechat: false,
            balances: {
                eleSignOverAmount: 0,
                payBalance: 0,
                wesureBalance: 0,
                canUseBalance: 0
            },
            trendBasic: {
                payAvailableTotalMoney: 0,
                payTotalMoney: 0,
                payOrderCount: 0,
                payStopTotalMoney: 0,
                payReceiveTotalMoney: 0
            },
            addressPeopleCount: 0,
            unclaimedCount: 0,
            payMonth: '',
            insuranceTab: 0 as any,
            contractTab: 0,
            isOpenWesure: false,
            isOpenEleSign: false,
            isOpenPaySalary: false,
            $store: store,
            riskInfo: {} as any,
            claimRate: 0,
            insureType: '0',
            recordNum: 'insure_type_rrb',
            showSeatNotice: !localStorage.getItem('showSeatDialog'),
            advanceUnclaimedCount: 0,
            showFestival: !localStorage.getItem('2025newyearPop') && (now < end) && (now > start)
        }
    },
    async mounted() {
        await user.waitLogin()
        console.log('user.waitLogin')
        console.log(user.isOpenEleSign)
        this.payMonth = dateFormat('YYYY-mm', new Date())
        // if (user.isOpenEleSign) {
        //     this.isOpenEleSign = user.isOpenEleSign
        //     this.onContractTab(0)
        // }
        if (user.isOpenWesure) {
            this.isOpenWesure = user.isOpenWesure
            this.onInsuranceTab(0)
            this.getInsuranceRiskInfo()
        }
        if (user.isOpenPaySalary) {
            this.isOpenPaySalary = user.isOpenPaySalary
            this.onPayMonth()
        }
    },
    async created() {
        queryRechargeAndSync()
        let res = await getAccountProductStatusApi()
        console.log(res, 'ufgsdyuygfs')
        let commonlyList = await getCompanyListApi({ userId: user.userId })
        console.log(commonlyList, 'commonlyList')
        this.companyList = commonlyList as CompanyItemDto[]
        this.accountProductStatus = res
        getBalance().then(res => {
            this.balances = res
        })
        getPeopleCount().then(res => {
            this.addressPeopleCount = res.addressPeopleCount
            this.unclaimedCount = res.unclaimedCount
            this.advanceUnclaimedCount = res.advanceUnclaimedCount
        })
    },
    methods: {
        /**
         * 切换公司
         * @param username
         * @param companyId
         */
        async onChangeCompany(companyId: string | number) {
            await user.switchLogin({
                username: user.phone,
                companyId: companyId
            })
            window.location.reload()
            // let res: any = await replaceCompany({ username: user.phone, companyId: companyId })
            // console.log(res)
            // this.$message.success('切换公司成功。')
            // global.token = res.token
            // sessionStorage.token = res.token
            // user.getUserInfo()

        },
        /**
         * 微信充值
         */
        onWechatRecharge() {
            this.isShowwechat = true
        },
        // 去详情
        onDetail() {
            this.$router.push({ path: 'account-details' })
        },
        // 在保人数切换Type
        onRecordNum(str: string) {
            console.log(str)
            this.recordNum = str
            this.onInsuranceTab(this.insuranceTab)
        },
        // 日日保仪表盘数据
        async getInsuranceRiskInfo() {
            const result = await getInsuranceRisk({
                coName: user.companyName
            })
            const riskData = await this.getChartsRisk()
            riskData.series[0].data[0].value = 100 - (100 * (Number(((result.finalMoney / result.totalPrice) * 100).toFixed(2)) >= 140 ? 140 : Number(((result.finalMoney / result.totalPrice) * 100).toFixed(2))) / 140)
            riskData.series[1].data[0].value = (98 - (100 * (Number(((result.finalMoney / result.totalPrice) * 100).toFixed(2)) >= 140 ? 140 : Number(((result.finalMoney / result.totalPrice) * 100).toFixed(2))) / 140)) === 98 ? 100 : (98 - (100 * (Number(((result.finalMoney / result.totalPrice) * 100).toFixed(2)) >= 140 ? 140 : Number(((result.finalMoney / result.totalPrice) * 100).toFixed(2))) / 140))
            this.riskInfo = result
            await this.getDashboardRisk(riskData)
            console.log(riskData.series[0].data[0].value, riskData.series[0].data[0].value, '计算后的内容')
        },
        async onPayMonth() {
            echarts.dispose(document.getElementById('trend') as HTMLElement)
            const result = await getPayTrend({
                queryMonth: this.payMonth
            })
            console.log(result, 'resultresultresult')
            const {
                payAvailableTotalMoney,
                payTotalMoney,
                payOrderCount,
                payStopTotalMoney,
                payReceiveTotalMoney
            } = result
            this.trendBasic = {
                payAvailableTotalMoney,
                payTotalMoney,
                payOrderCount,
                payStopTotalMoney,
                payReceiveTotalMoney
            }
            const option = this.getChartsTemplete()
            const charts = echarts.init(
                document.getElementById('trend') as HTMLElement
            )
            option.grid.y = 60
            option.xAxis.data = result.list.map(
                item => item.date.split(' ')[1] || item.date
            )
            option.series[0].name = '发薪'
            option.series[0].data = result.list.map(item => item.payTotalMoney)
            option.series.push({
                name: '领薪',
                type: 'line',
                smooth: true,
                data: result.list.map(item => item.payReceiveTotalMoney)
            })
            charts.setOption(option)
        },
        async onContractTab(tab: 0 | 1 | 2) {
            echarts.dispose(document.getElementById('contract') as HTMLElement)
            this.contractTab = tab
            // this.contractData[tab] = 123
            const result = await getContractTrend({
                queryRange: ['DAY', 'WEEK', 'MONTH'][tab] as
                    | 'DAY'
                    | 'WEEK'
                    | 'MONTH'
            })
            const option = this.getChartsTemplete()
            const charts = echarts.init(
                document.getElementById('contract') as HTMLElement
            )
            option.title.show = false
            option.legend.show = false
            option.xAxis.data = result.list.map(
                item => item.date.split(' ')[1] || item.date
            )
            option.series[0].data = result.list.map(item => item.signedCount)
            option.series[0].name = '共签署人数'
            charts.setOption(option)
        },
        async onInsuranceTab(tab: 0 | 1 | 2) {
            echarts.dispose(document.getElementById('insurance') as HTMLElement)
            this.insuranceTab = tab
            // this.contractData[tab] = 123
            const result = await getInsuranceTrend({
                insurCompany: this.recordNum,
                queryRange: ['DAY', 'WEEK', 'MONTH'][tab] as
                    | 'DAY'
                    | 'WEEK'
                    | 'MONTH'
            })
            const option = this.getChartsTemplete()
            const charts = echarts.init(
                document.getElementById('insurance') as HTMLElement
            )
            option.title.show = false
            option.legend.show = false
            option.xAxis.data = result.list.map(
                item => item.date.split(' ')[1] || item.date
            )
            option.series[0].data = result.list.map(item => item.wesureCount)
            option.series[0].name = '投保人数'
            charts.setOption(option)
        },
        getChartsTemplete() {
            return {
                title: {
                    text: '发薪及领薪趋势图',
                    top: 10,
                    left: 10,
                    show: true
                },
                backgroundColor: '#F7F8FC',
                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                grid: {
                    x: 50,
                    y: 50,
                    x2: 50,
                    y2: 50
                },
                legend: {
                    right: 70,
                    top: 10,
                    show: true
                },
                color: ['#4D7CFE', '#67C23A'],
                xAxis: {
                    data: [
                        'Shirts',
                        'Cardigans',
                        'Chiffons',
                        'Pants',
                        'Heels',
                        'Socks'
                    ],
                    boundaryGap: true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    minInterval: 1,
                    boundaryGap: ['0%', '10%']
                },
                series: [
                    {
                        name: '发薪',
                        type: 'line',
                        smooth: true,
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            }
        },
        async getDashboardRisk(riskData: any) {
            const option = await riskData
            const charts = echarts.init(document.getElementById('risk') as HTMLElement)
            option && charts.setOption(option)
            console.log('optionoption')
        },
        // 仪表盘数据
        getChartsRisk() {
            return {
                series: [
                    {
                        type: 'gauge',
                        center: ['50%', '90%'],
                        startAngle: 180,
                        endAngle: 0,
                        radius: '130%',
                        min: 0,
                        max: 100,
                        splitNumber: 20,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#FF7E68' // 0% 处的颜色
                                }, {
                                    offset: 0.25, color: '#FF9444' // 100% 处的颜色
                                }, {
                                    offset: 0.5, color: '#FFC53D' // 100% 处的颜色
                                }, {
                                    offset: 0.75, color: '#B0ED00' // 100% 处的颜色
                                }, {
                                    offset: 1, color: '#00D679' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        progress: {
                            show: true,
                            width: 60
                        },
                        pointer: {
                            // icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                            show: false,
                            length: '130',
                            offsetCenter: [0, -235],
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                width: 35,
                                color: [
                                    [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {
                                            offset: 0.3,
                                            color: 'rgba(255, 129, 114, 0.1)'
                                        },
                                        {
                                            offset: 0.7,
                                            color: 'rgba(255, 197, 61, 0.1)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(115, 222, 179, 0.1)'
                                        }
                                    ])
                                    ]
                                ]
                            }
                        },
                        axisTick: {
                            distance: -50,
                            splitNumber: 5,
                            lineStyle: {
                                width: 4,
                                height: 3,
                                color: '#FFF3E1'
                            }
                        },
                        splitLine: {
                            distance: -45,
                            length: 14,
                            show: false,
                            lineStyle: {
                                width: 3,
                                height: 2,
                                color: '#FFF3E1'
                            }
                        },
                        axisLabel: {
                            distance: -30,
                            color: '#999',
                            fontSize: 20,
                            show: true,
                            formatter: function (value: any) {
                                if (value === 0) {
                                    return ['{a|极差}'].join('\n')
                                } else if (value === 20) {
                                    return ['{b|较差}'].join('\n')
                                } else if (value === 50) {
                                    return ['{c|一般}'].join('\n')
                                } else if (value === 80) {
                                    return ['{d|不错}'].join('\n')
                                } else if (value === 100) {
                                    return ['{e|优秀}'].join('\n')
                                }
                            },
                            rich: {
                                a: {
                                    fontWeight: 600,
                                    fontSize: 20,
                                    color: '#FF7E68',
                                    align: 'center',
                                    margin: 100
                                },
                                b: {
                                    fontWeight: 600,
                                    fontSize: 20,
                                    color: '#FF9444',
                                    align: 'center'
                                },
                                c: {
                                    fontWeight: 600,
                                    fontSize: 20,
                                    color: '#FFC53D',
                                    align: 'center'
                                },
                                d: {
                                    fontWeight: 600,
                                    fontSize: 20,
                                    color: '#B0ED00',
                                    align: 'center'
                                },
                                e: {
                                    fontWeight: 600,
                                    fontSize: 20,
                                    color: '#00D679',
                                    align: 'center',
                                    margin: 100
                                }
                            }
                        },

                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '100%',
                            height: '50%',
                            lineHeight: 60,
                            borderRadius: 8,
                            offsetCenter: [0, '-40%'],
                            fontSize: 60,
                            fontWeight: 'bolder',
                            formatter: function (value: any) {
                                if (value <= 0) {
                                    return ['{a|}', '{b|}', '{a|极差}', '{b|综合评价}'].join('\n')
                                } else if (value > 0 && value <= 25) {
                                    return ['{a|}', '{b|}', '{a|较差}', '{b|综合评价}'].join('\n')
                                } else if (value > 25 && value <= 50) {
                                    return ['{a|}', '{b|}', '{a|一般}', '{b|综合评价}'].join('\n')
                                } else if (value > 50 && value <= 75) {
                                    return ['{a|}', '{b|}', '{a|不错}', '{b|综合评价}'].join('\n')
                                } else if (value > 75 && value <= 100) {
                                    return ['{a|}', '{b|}', '{a|优秀}', '{b|综合评价}'].join('\n')
                                }
                            },
                            rich: {
                                a: {
                                    fontSize: 30,
                                    fontWeight: 600,
                                    fontFamily: 'Arial',
                                    lineHeight: 60,
                                    margin: [250, 0, 0, 0],
                                    color: '#202536',
                                    align: 'center'
                                },
                                b: {
                                    fontSize: 18,
                                    fontWeight: 400,
                                    fontFamily: 'Arial',
                                    lineHeight: -100,
                                    color: '#9497B1',
                                    align: 'center'
                                }
                            },
                            backgroundColor: {
                                width: '1%',
                                height: '1%',
                                image: 'https://s1.ax1x.com/2022/11/10/z9u9w4.png'
                            }
                        },
                        data: [
                            {
                                value: 81
                            }
                        ]
                    },
                    {
                        type: 'gauge',
                        center: ['50%', '90%'],
                        startAngle: 180,
                        radius: '113%',
                        animation: false,
                        endAngle: 0,
                        min: 0,
                        max: 100,
                        itemStyle: {
                            color: '#fff'
                        },
                        progress: {
                            show: true,
                            width: 45
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [
                            {
                                value: 80
                            }
                        ]
                    }
                ]
            }
        }
    }
})
</script>

<style lang="stylus" scoped>
.container
    width: 100%;
.basic
    space-between()
    padding: 24px

.welcome
    display flex
    align-items center

.welcome-avatar
    avatar-round(40px)

.welcome-text
    margin-left 15px

.basic-data-list
    display flex
.row-list.basic-data
    flex-direction column
    font-size 12px
    .data-num
        font-size 12px
        margin 4px 0
    &:before
        content unset !important
.basic-data
    text-align right
    // min-width 120px
    padding 0 20px
    display flex
    align-items center
    justify-content center
    position relative
.basic-data:not(:first-of-type):before
    content ''
    width 1px
    height 40px
    position absolute
    left 0
    background-color border-color
.basic-data:last-of-type
    text-align: right;
    justify-content: right;
    // width: 90px;

.basic-data-title
    color color-grey
.basic-data-num
    margin-top 10px
    text-align left
.data-num
    font-size 26px
    font-style italic
    font-weight bold

.block-header
    space-between(false)
.block-title
    font-size font-small
    color black
    font-weight bold

// 常用
.commonly
    space-between(false)

.trend
    width 70%
    // height 478px

:deep() .date-month
    margin-top 12px

.right
    width 29%
    .block
        padding 0
    .block-header
        border-bottom 1px F7F8FC
        padding 14px 16px
    .block-content
        // space-between()
        display flex
        justify-content space-between
        padding 18px 16px

.go-detail
    color #1989FA
.triangle.triangle-arrow
    border-color transparent transparent transparent #1989FA
    top -2px
    margin-left 6px

.fast-menu
    text-align center
    width: 25%
.fast-menu-icon
    margin-bottom 6px
.data-labels
    display flex
.data-label
    margin-right 16px
    display flex
    align-items center
    &:before
        content ''
        display inline-block
        width 10px
        height 3px
        border-radius 3px
        margin-right 4px
    &.blue:before
        background #3651FF
    &.green:before
        background #00D679
.row
    margin 6px 0

#trend
    width 100%
    height 341px
    margin 18px auto
    border-radius 10px
    overflow hidden
#insurance, #contract
    width 100%
    height 450px
    margin 12px auto 0 0
    border-radius 6px
    overflow hidden
.block.blur
    position relative
    overflow hidden
    padding 0
.lock-box
    position absolute
    top 0
    left 0
    z-index 100
    display flex
    align-items center
    justify-content center
    flex-direction column
    color white
    text-align center
    width 100%
    height 100%
    line-height 1.5em
    background rgba(32, 37, 54, 0.6)
.lock
    padding 15px
    background-color white
.lockBlur
    filter blur(8px) brightness(0.9)
.risk-box
    width 49.5%
.risk-insure-box
    display flex
    justify-content space-between
.risk-info
    padding 0 10px
    .title
        color #9497B1
        margin-bottom 6px
    .num
        color #202536
        font-size 26px
        font-weight 600
        .unit
            font-size 16px
    .num-active
        color #1593F9
.risk-adorn
    width 1px
    height 42px
    background #EFF2F5
.insure-box
    width 49.5%
.btn-insure-box
    display flex
    align-items center
    justify-content center
.btn-insure
    width 96px
    height 32px
    background #FFFFFF
    border 1px solid #E8E9EA
    border-radius 4px
    color #9497B1
    font-size 14px
    text-align center
    line-height 32px
    margin-right 8px
.btn-insure-active
    border: 1px solid #1989FA;
    color #1989FA
    background #F3F5FF
    font-size 16px
    font-weight: 600;
.insure-type-box
    width 108px
    height 30px
    /deep/ .el-select .el-input__inner
        font-weight 600
        color #202536
.insure-remind-box
    padding 16px 14px
    box-sizing border-box
    background #F7F8FC
    border-radius 8px
    margin-top 12px
    font-size 12px
    color #9497B1
    line-height: 22px;
    .title
        color #202536
        font-weight 600
        margin-right 16px
        font-size 14px
.box
    background #F7FBFE
    border-radius 4px
    padding 7px 8px
.set-pd
    padding 0 16px 18px
.block
    padding 0
    width: 100%
    margin-top 0
.block-header
    space-between(false)
    border-bottom 1px solid #F7F8FC
    padding 14px 16px 8px
.block-title
    font-size font-small
    color black
    font-weight bold
.block-more
    display flex
    align-items center
    color color-blue
    .triangle
        margin-left 8px
        border-color color-blue transparent transparent transparent
        transform rotate(270deg)
        top 0
.block-content
    // space-between()
    padding 18px 16px
.w-45{
    width 45%
}
.key
    font-size font-mini
    margin-bottom: 6px
.flex-btetween
    justify-content space-between
.balance
    font-style italic

.number
    font-weight bold
    font-size font-large
.p-l-40
    padding-left 40px
.p-r-24
    padding-right 24px
.border-r
    border-right 2px solid #F7F8FC
    box-sizing border-box
.wh-16
    width 16px
    height 16px

</style>
